<template>
<div class="create-color-view">
    <div class="top box-shadow_2">
        <div class="top">
            <div class="one item"
                :style="{
                    backgroundColor:colorData.one,
                }">
                <div class="copy">
                    <Copy
                        :title="colorData.one"
                        :content="colorData.one">
                    </Copy>
                </div>
                <div class="add_picker">
                    <ColorPicker
                        v-model="colorData.one">
                    </ColorPicker>
                </div>
            </div>
            <div class="two item"
                :style="{
                    backgroundColor:colorData.two,
                }">
                <div class="copy">
                    <Copy
                        :title="colorData.two"
                        :content="colorData.two">
                    </Copy>
                </div>
                <div class="add_picker">
                    <ColorPicker
                        v-model="colorData.two">
                    </ColorPicker>
                </div>
            </div>
            <div class="three item"
                :style="{
                    backgroundColor:colorData.three,
                }">
                <div class="copy">
                    <Copy
                        :title="colorData.three"
                        :content="colorData.three">
                    </Copy>
                </div>
                <div class="add_picker">
                    <ColorPicker
                        v-model="colorData.three">
                    </ColorPicker>
                </div>
            </div>
            <div class="four item"
                :style="{
                    backgroundColor:colorData.four,
                }">
                <div class="copy">
                    <Copy
                        :title="colorData.four"
                        :content="colorData.four">
                    </Copy>
                </div>
                <div class="add_picker">
                    <ColorPicker
                        v-model="colorData.four">
                    </ColorPicker>
                </div>
            </div>
        </div>
        <div class="bottom">
            <el-popover
                placement="top"
                width="300"
                v-model="show">
                <el-form label-position="top" label-width="80px" :model="colorData">
                    <el-form-item label="名称">
                        <el-input v-model="colorData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="标签(用'|'号隔开)">
                        <el-input v-model="colorData.tags"></el-input>
                    </el-form-item>
                    <el-form-item label="配色介绍">
                        <el-input type="textarea" v-model="colorData.content"></el-input>
                    </el-form-item>
                </el-form>
                
                <div class="add" slot="reference">
                    <Add_other_bt></Add_other_bt>
                </div>
            </el-popover>
        </div>
    </div>
    <div class="bottom" @click="on_submit">
        提交
    </div>
    <Loading
        :state="loading">
    </Loading>
</div>
</template>

<script>
import Loading from '@/components/other/Loading';
import Copy from '@/components/other/Copy';
import ColorPicker from '@/components/other/ColorPicker';
export default {
    name: 'CreateColor',
    components: {Loading,Copy,ColorPicker},
    data(){
        return{
            show:false,
            loading:false,
            colorData:{
                one:"#db3b61",
                two:"#ef3f61",
                three:"#3a3a59",
                four:"#555574",
                name:'',
                content:'',
                tags:'',
                type:1,
            },
        };
    },
    watch:{
        $route:{
            handler(){
                for(let a in this.colorData){
                    this.colorData[a] = this.$route.query[a] || '';
                }
            },
            immediate:true,
        },
    },
    methods:{
        on_submit(){
            let old_length = this.$store.state.my_create.color.length;
            this.$store.commit('add_my_create',{
                color:this.colorData,
            });
            let new_length = this.$store.state.my_create.color.length;
            if(old_length !== new_length && !this.loading){ //表示数据已经添加到本地了,可以提交
                this.loading = true;
                this.$axios.my_post('/add_upload',{
                    ...this.colorData,
                }).catch(() =>{
                    return;
                }).finally(()=>{
                    this.loading = false;
                    //跳转到我的页面
                    this.$router.push({
                        path: '/mine',
                        query: {
                            type:'color',
                        }
                    }).catch(()=>{return;});
                });
            }else{
                this.$message('已经添加过该配色了！');
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.create-color-view{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    >.top{
        border: none;
        background-color: white;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 5px;
        max-width: 400px;
        width: 100%;
        >.top{
            border-radius: 5px;
            overflow: hidden;
            >.item{
                width: 100%;
                position: relative;
                transition: all 0.2s;
                >.copy{
                    width: fit-content;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    opacity: 0;
                    transition: all 0.2s;
                    /deep/.Copy{
                        border-radius: 0px 3px 0 0; 
                    }
                }
                >.add_picker{
                    width: fit-content;
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    opacity: 0;
                    transition: all 0.2s;
                }
                &:hover{
                    >.copy{
                        opacity: 1;
                    }
                    >.add_picker{
                        opacity: 1;
                    }
                }
            }
            >.one{
                height: 150px;
                //background-color: #db3b61; //防止有些颜色显示不出来
            }
            >.two{
                height: 100px;
                //background-color: #ef3f61; //防止有些颜色显示不出来
            }
            >.three{
                height: 70px;
                //background-color: #3a3a59; //防止有些颜色显示不出来
            }
            >.four{
                height: 70px;
                //background-color: #555574; //防止有些颜色显示不出来
            }
        }
        >.bottom{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
        }
    }
    >.bottom{
        margin-top: 35px;
    }
}
</style>

